<template>
  <div class="app-container">

    <el-table ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="id" label="序号" > </el-table-column>
      <el-table-column prop="user.user_no" label="举报人ID" > </el-table-column>
      <el-table-column prop="user.mobile" label="举报人手机" > </el-table-column>
      <el-table-column prop="room.room_id" label="被举报房间ID" > </el-table-column>
      <el-table-column prop="room.room_name" label="被举报房间名称" > </el-table-column>
      <el-table-column prop="remark" label="举报理由" > </el-table-column>
      <el-table-column prop="picture" label="举报图片" >
        <template slot-scope="scope">
          <el-popover placement="right" max-width="220" trigger="hover">
            <img :src="scope.row.picture" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.picture" alt="" style="width: 50px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="add_time" label="举报时间" > </el-table-column>

     <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)" plain>删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.perPage" @pagination="getList"/>

       <!-- 删除弹框 -->
    <el-dialog
        title="确定删除吗?"
        :visible.sync="deleteDialogVisible"
        width="435px"
        >
        <span style=""><em style="font-style:normal;color:red">删除后不可恢复</em>，你还要继续吗？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmDelete">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import { deleteData,listData } from '@/api/report/roomReport'
  export default {
    data() {
      return {
        confirmBtn:false,

        dataIds:undefined,
        deleteDialogVisible:false,
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10
        },
        menuList: [],
        dialogStatus: '',
        titleMap: {
          update: '编辑',
          create: '增加'
        },
        form: {
          id: undefined,
          name: undefined,
          price: undefined,
          renew: undefined,
          rebate: undefined,
          head_picture: undefined,
          moods: undefined,
          ratio: undefined,
          image: undefined,
        },
        rules: {
          name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
          price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
          renew: [{ required: true, message: '请输入续费', trigger: 'blur' }],
          rebate: [{ required: true, message: '请输入返利', trigger: 'blur' }],
          head_picture: [{ required: true, message: '请输入头像框图片', trigger: 'blur' }],
          moods: [{ required: true, message: '请输入进场人气加成', trigger: 'blur' }],
          ratio: [{ required: true, message: '请输入经验加速', trigger: 'blur' }],
          image: [{ required: true, message: '请输入爵位图片', trigger: 'blur' }],
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 点击单个删除
      handleDelete(row) {
          this.dataIds = {ids:`${row.id}`}
          this.deleteDialogVisible = true
      },
      // 确定删除
        confirmDelete(){
          if(this.confirmBtn) return
          this.confirmBtn = true

            deleteData(this.dataIds).then((response) => {
                if (response.code === 200) {
                    this.getList()
                    this.deleteDialogVisible = false;
                    this.$notify({
                        type:'success',
                        message: '操作成功',
                        position: 'bottom-right',
                        showClose: false,
                        duration: 3000
                    });
                } else {
                  this.confirmBtn = false
                    this.$message({
                        message: response.message,
                        type: 'error'
                    });
                }
            })
        },
      getList() {
        this.listLoading = true;
        let urlData = "?";
        if (this.listQuery.page) {
            urlData = urlData + `page=${this.listQuery.page}&`;
        }
        if (this.listQuery.perPage) {
            urlData = urlData + `perPage=${this.listQuery.perPage}`;
        }
        listData(urlData).then((response) => {
            this.menuList = response.data.list;
            this.total = response.data.meta.total;
            this.listLoading = false
            this.confirmBtn = false
        })
      },
      handleCreate(row) {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      handleUpdate(row) {
        this.form = []
        this.form.id= row.id
        this.form.name= row.name
        this.form.price= row.price
        this.form.renew= row.renew
        this.form.rebate= row.rebate
        this.form.head_picture= row.head_picture
        this.form.moods= row.moods
        this.form.ratio= row.ratio
        this.form.image= row.image

        this.dialogStatus = 'update'
        this.dialogFormVisible = true

        this.form = Object.assign({}, this.form)
      },

      submitForm() {
        this.$refs['dataForm'].validate(valid => {
          if (valid && this.dialogStatus === 'create') {
            let formData = new FormData();
            for(let item in this.form){this.form[item] === undefined? '':formData.append(item, this.form[item]);}
            saveData(formData).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            })
          }else if(valid && this.dialogStatus === 'update'){
            let formData = new FormData();
            for(let item in this.form){this.form[item] === undefined? '':formData.append(item, this.form[item]);}
            updateData(formData).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            })
          }
        })
      },
      resetForm() {
        this.form = {
          id: undefined,
          name: undefined,
          price: undefined,
          renew: undefined,
          rebate: undefined,
          head_picture: undefined,
          moods: undefined,
          ratio: undefined,
          image: undefined,
        }
      },
      // 监听dialog关闭时的处理事件
      handleDialogClose() {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
        }
      }
    }
  }
</script>
